<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Theme style -->

    <link rel="stylesheet" th:href="@{/admin/plugins/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/admin/dist/css/font-awesome.min.css}">




    <style rel="stylesheet" type="text/css">
        .img{
            width: 50px;
            height: 50px;
        }
        .sub-img{
            display: inline-block;
            float: left;
        }
        .uploadbtn {
            position: relative;
            margin-top: 10px;
        }
        .form-group{
            display: flex;
            flex-flow: column;
            margin-left: 173px;
        }
        .richText{
            height: 300px;
            width: 700px;
            margin: 0 auto;
        }
        .product-content{
            width: 1080px;
            margin: 0 auto;
            padding: 10px 20px;
        }
    </style>



</head>
<body>
<div class="product-content">
    <div class="form-group">
        <div class="img-con">
        </div>

        <div class="uploadbtn">
            <div style="overflow: hidden; display: inline-block;">
                <button id="upload">上传图片</button>
            </div>
            <input id="fileUpload" type="file" onchange="uploadImage()" name="file" accept="image/gif,image/jpeg,image/jpg,image/png" style="display: none;">
        </div>

    </div>
    <div class="richText">
        <div id="wangEditor">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>
        <input class="submit" type="submit" onclick="productAdd()" value="上传商品">
    </div>

</div>


</body>
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/mall/js/wangEditor.min.js}"></script>
<script type="text/javascript">
    let that = this;
    let E = window.wangEditor;
    editor = new E('#wangEditor');
    // 设置高度
    editor.$textContainerElem.css('height','100px');
    //开启debug模式
    editor.config.debug = true;
    // 关闭粘贴内容中的样式
    editor.config.pasteFilterStyle = false;
    // 忽略粘贴内容中的图片
    editor.config.pasteIgnoreImg = true;
    // 使用 base64 保存图片
    //editor.config.uploadImgShowBase64 = true
    // 上传图片到服务器
    editor.config.uploadFileName = 'files'; //设置文件上传的参数名称
    editor.config.uploadImgServer = '/richtext_upload'; //设置上传文件的服务器路径
    editor.config.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
    editor.config.uploadImgMaxLength = 5;
    editor.config.uploadImgHooks = {
        before : function(xhr, editor, files) {},
        success : function(xhr, editor, result) { console.log("上传成功"); },
        fail : function(xhr, editor, result) { console.log("上传失败,原因是"+result);},
        error : function(xhr, editor) { console.log("上传出错");},
        timeout : function(xhr, editor) { console.log("上传超时");},
        customInsert: function (insertImg, result, editor) {
            // insertImg 是插入图片的函数，editor 是编辑器对象，
            // result 是服务器端返回的结果必须是一个JSON格式字符串,多个图片地址组成的数组
            for (var j = 0; j < result.data.length; j++) {
                insertImg(result.data[j]);
                console.log(result.data);
            }
            console.log("上传图片成功！");
        }
    }
    //自己定义上传的方法
    editor.config.customUploadImg = function (files, insert) {
        var daw = new FormData();
        for(var i=0;i<files.length;i++){
            daw.append("files",files[i]);
        }
        $.ajax({
            url:'richtext_upload',
            type: "POST",
            data: daw,
            dataType:'json',
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success:function(da){
                if(da.errno == 0){
                    // insertImg 是插入图片的函数，editor 是编辑器对象，
                    // result 是服务器端返回的结果必须是一个JSON格式字符串,多个图片地址组成的数组
                    for (var j = 0; j < da.data.length; j++) {
                        insert(da.data[j]);
                    }
                    console.log("上传图片成功！");
                }else{
                    alert(da.msg);
                    return;
                }
            }
        });
    }
    editor.create();


    //绑定图片上传按钮
    $('#upload').click(function () {
        $('#fileUpload').click();
    });


//     获取所有的Id值，方法是通过div.class获取全局的值，然后再提取具体的Id值
// 方法一：用for循环，因为$（"div.class"）获取的是一个数组，通过循环读取出数组中的每一个元素：
    function productAdd() {
        var subImgList = new Array();
        var Image=$("div.sub-img");
        var mainImg = Image.eq(0).attr("value");
        for (var i = 0;i < Image.length; i++) {  //一共有53个元素，所需要的Id从第四个开始取的
            var Imgvalue = Image.eq(i).attr("value");
            subImgList = subImgList.concat(Imgvalue);
        };
        var subImg = subImgList.toString();
        console.log(subImg);
        //获取文本框里的内容
        var html = editor.txt.html();

        var productInfo = {
            id:30,
            mainImage:mainImg,
            subImages:subImg,
            detail:html
        };

        $.ajax({
            type:'POST',
            url:'/productUpdate',
            contentType : 'application/json',
            data: JSON.stringify(productInfo),
            success : function (result) {
                if (result.resultCode == 200){
                    alert(result.message);
                }else {
                    alert(result.message);
                }
            },
            error : function () {
                alert("操作错误");
            }
        });
    }



    //单张商品图片上传
    function uploadImage(){
        var formData = new FormData();//它是为序列化表以及创建与表单格式相同的数据（）提供便利。
        formData.append('file', $('#fileUpload')[0].files[0]);
        $.ajax({
            type:'POST',
            url:'/uploadimg',
            data:formData,
            contentType:false, //contentType:发送信息至服务器时内容编码类型(告诉服务器从浏览器提交过来的数据格式);在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。
            processData:false, //默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded
            success:function (result) {
                if (result.resultCode == 200){
                    console.log(result.data);
                   $('.img-con').append('<div class="sub-img" value="'+result.data.uri+'"><img class="img" src="'+result.data.url+'" alt=""/><i class="fa fa-close fa-fw"></i></div>');
                }else{
                    console.log(result.message);
                }
            },
            error : function (result) {
                console.log();
            }
        });

    }



    // 商品图片上传ftp后的删除
    $(document).on('click','.fa',function () {
        var fileDel = $(this).parent().attr('value');
        $(this).parent().remove();
        $.ajax({
            type:'POST',
            url:'/uploadDel',
            data:{fileName:fileDel},
            success : function (result) {
                if (result.resultCode == 200){
                console.log(fileDel);
                console.log(result.message);
                }
                else{
                    console.log(result.message);
                }
            },
            error : function (result) {
                alert(result.message);
            }
        });

    });
</script>
</html>